<html>
<head>
<meta charset="utf-8">
<title>Leaflet.curve plugin demo</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-1.0.0-b1/leaflet.css" />
<style>
#map { height: 500px; }
</style>
</head>
<body>
<div id="map"></div>


<script src="http://cdn.leafletjs.com/leaflet-1.0.0-b1/leaflet.js"></script>
<script src="leaflet.curve.js"></script>

<script>
//set up map
var map = L.map('map').setView([46.05, 11.05], 5);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);

//quadratic bezier curve
var pathOne = L.curve(['M',[50.14874640066278,14.106445312500002],
					   'Q',[51.67255514839676,16.303710937500004],
						   [50.14874640066278,18.676757812500004],
					   'T',[49.866316729538674,25.0927734375]]).addTo(map);

//cubic bezier curve (and straight lines)
var pathTwo = L.curve(['M',[50.54136296522163,28.520507812500004],
					   'C',[52.214338608258224,28.564453125000004],
						   [48.45835188280866,33.57421875000001],
						   [50.680797145321655,33.83789062500001],
					   'V',[48.40003249610685],
					   'L',[47.45839225859763,31.201171875],
						   [48.40003249610685,28.564453125000004],'Z',
					   'M',[49.55372551347579,29.465332031250004],
					   'V',[48.7822260446217],
					   'H',[33.00292968750001],
					   'V',[49.55372551347579],'Z'],{color:'red',fill:true}).addTo(map);

//elliptical arc
var pathThree = L.curve(['M',[44.37098696297173,0.48339843750000006],
						 'L',[45.182036837015886,1.6699218750000002],
						 'A',[1,1,-30,1,1,46.619261036171515,3.8232421875000004],
						 'L',[47.42808726171425,5.3173828125],
						 'A',[1,2,-45,1,0,48.16608541901253,6.591796875000001],
						 'L',[49.15296965617039,7.866210937500001]],{color:'orange', weight:7}).addTo(map);


function onMapClick(e) {
    console.log(e.latlng);
}
map.on('click', onMapClick);
</script>
</body>
</html>
